<template>
    <el-menu
            :default-active="activeIndex"
            @select="click"
            v-if="show">
        <el-menu-item :index="item.name" v-for="(item,index) in menuList" :key="index">
            <i v-if="item.icon" :class="item.icon"></i>
            <span slot="title">{{item.title}}</span>
        </el-menu-item>
    </el-menu>
</template>

<script>
    import {menu} from '../router'
    export default {
        name: "sideMenu",
        computed: {
            menuList() {
                var menuList = []
                var data = menu[this.$route.matched[2].name]
                for (var i in data) {
                    if (data[i].menu) menuList.push({
                        title: data[i].title || '',
                        name: data[i].name || '',
                        icon: data[i].icon || '',
                        width: data[i].width || ''
                    })
                }
                return menuList
            },
            show() {
                return this.menuList.length > 0 ? true : false
            },
            activeIndex() {
                if (this.$route.matched[3]) {
                    return this.$route.matched[3].name || ''
                } else {
                    return ''
                }
            }
        },
        created() {
            this.$emit('sideMenu', this.show ? '200px' : false)
        },
        watch: {
            show(val) {
                this.$emit('sideMenu', val ? '200px' : false)
            }
        },
        methods: {
            click(index) {
                this.$router.push({
                    name: index
                })
            }
        }
    }
</script>

<style scoped>

</style>